<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="谢玟莉">
    <meta name="keywords" content="个人网站，设计师网站">
    <title>xwlxwlxwl</title>
</head>
<style>
    .boxx {
        position: relative;
        top: 800px;
        right: 450px;
        transition: all .4s;
        transform-style: preserve-3d;
    }
    
    .boxx:hover {
        transform: rotateY(180deg);
    }
    
    .front,
    .back {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        font-size: 30px;
        text-align: center;
        line-height: 300px;
    }
    
    .front {
        z-index: 1;
    }
    
    .back {
        transform: rotateY(180deg);
    }
    
    body {
        background-color: black;
        min-width: 100%;
        min-height: 100%;
    }
    
    .bg {
        background-color: black;
        margin: 0 auto;
    }
    
    .shipin {
        position: absolute;
        min-width: 100%;
        min-height: 100%;
    }
    
    h2 {
        color: white;
        display: inline-block;
        position: absolute;
        left: 500px;
        top: 800px;
    }
    
    h3 {
        color: white;
    }
    
    .zzz,
    .fff {
        border-radius: 120px;
    }
    
    .mee {
        border-radius: 80px;
        position: absolute;
        top: 1000px;
        right: 160px;
        overflow: hidden;
        border: 1px solid black;
    }
    
    .jieshao img {
        width: 160px;
        height: 160px;
        transition: all 1.5s;
    }
    
    .jieshao img:hover {
        box-shadow: 0 0 10px gray;
        transform: scale(1.5);
        transform: rotate(360deg);
    }
    
    .jieshao h4 {
        color: rgb(253, 242, 250);
        position: absolute;
        left: 560px;
        top: 950px;
    }
    
    .jieshao p {
        color: white;
        display: inline-block;
        position: relative;
        left: 300px;
        top: 880px;
    }
    
    .zi p {
        color: white;
    }
    
    .jieshao a {
        color: rgb(240, 226, 226);
        position: absolute;
        font-size: 20px;
    }
    
    .jieshao h2 {
        position: relative;
        top: 680px;
    }
    
    .r {
        position: relative;
        top: 855px;
        left: 140px;
    }
    
    .w {
        position: relative;
        top: 795px;
        left: 140px;
    }
    
    .s {
        position: absolute;
        top: 1280px;
        right: 220px;
    }
    
    .zi {
        width: 350px;
        height: 280px;
        background-color: #656075;
        text-align: center;
        position: absolute;
        top: 1300px;
        right: 520px;
    }
    
    .m {
        position: absolute;
        top: 1700px;
        right: 300px;
    }
    
    .err {
        position: relative;
        left: 1120px;
        bottom: 155px;
    }
    
    .errr {
        position: relative;
        left: 75px;
        bottom: 2px;
    }
    
    .errrr {
        position: relative;
        left: 65px;
        bottom: 2px;
    }
    
    .errrrr {
        position: relative;
        left: 55px;
        bottom: 2px;
    }
    
    .l {
        position: relative;
        top: 1400px;
        left: 245px;
        transform: all 5s;
    }
    
    .l :hover {
        transform: scale(1.1);
    }
    
    .san,
    .liu {
        border-left: 10px solid;
    }
    
    .wu,
    .qi {
        border-right: 20px solid;
    }
    
    .x,
    .c,
    .b,
    .n,
    .xx,
    .cc,
    .bb,
    .nn {
        border-left: 70px solid;
    }
    
    .v,
    .b,
    .n,
    .zz,
    .xx,
    .cc,
    .vv,
    .bb,
    .nn {
        border-top: 70px solid;
    }
    
    .ma {
        position: relative;
        top: 1480px;
        left: 600px;
    }
    
    .ma h3 {
        position: absolute;
        left: -190px;
        top: -20px;
    }
    
    .vx,
    .qq {
        transform: scale(1);
    }
    
    .qq {
        border-left: 20px solid;
    }
    
    h4 {
        color: white;
        position: relative;
        left: 50px;
        bottom: 200px;
    }
    
    .mdw {
        position: absolute;
        top: 50px;
        left: 100px;
        text-decoration: none;
    }
    
    .mdq {
        position: absolute;
        top: 50px;
        left: 200px;
        text-decoration: none;
    }
    
    .mde {
        position: absolute;
        top: 50px;
        left: 300px;
        text-decoration: none;
    }
    
    .box {
        position: relative;
        top: 760px;
        left: 630px;
        display: block;
        width: 0px;
        height: 0px;
        border: 30px solid transparent;
        border-top-color: rgb(148, 108, 153);
        animation: animate 1s ease-in infinite alternate;
    }
    
    @keyframes animate {
        0% {
            transition: translate(0, 0);
        }
        50% {
            border-top-color: rgb(218, 161, 205);
        }
        100% {
            transform: translate(0px, 50px);
        }
    }
    
    .r,
    .w {
        margin: 100px auto;
        overflow: hidden;
        border: 1px solid black;
    }
    
    .r img {
        width: 200px;
        height: 200px;
        transition: all 1.5s;
    }
    
    .r img:hover {
        transform: rotate(360deg);
        transform: scale(1.2);
    }
    
    .w img {
        width: 200px;
        height: 200px;
        transition: all 1.5s;
    }
    
    .w img:hover {
        transform: rotate(360deg);
        transform: scale(1.2);
    }
    
    .m img {
        transition: all 1.5s;
    }
    
    .m img:hover {
        transform: rotate(360deg);
        transform: scale(1.1);
    }
    
    .s {
        overflow: hidden;
    }
    
    .s {
        width: 290px;
        height: 280px;
        animation: scale 5s ease 1 forwards;
    }
    
    @keyframes scale {
        0% {
            transform: scale(1);
        }
        100% {
            transform: scale(1.6);
        }
    }
    
    .bbb {
        width: 80px;
        height: 20px;
        color: white;
        text-align: center;
        background-color: rgb(131, 148, 172);
        position: absolute;
        right: 50px;
        bottom: 50px;
    }
    
    .bbb a {
        display: block;
    }
    
    .bbb a:hover {
        color: rgb(221, 165, 22);
        background-color: rgb(226, 217, 217);
    }
    
    .bg {
        width: 320px;
        height: 560px;
        background: url("./img/zf_cubeBg.jpg") no-repeat 100% 100%;
        perspective: 3000px;
        position: absolute;
        top: 1750px;
        left: 200px;
    }
    
    .pin {
        position: relative;
        transform-style: preserve-3d;
        width: 100%;
        height: 100%;
        list-style: none;
        animation: move 6s infinite;
    }
    
    @keyframes move {
        0% {
            transform: translate(200px) rotateX(90deg);
        }
        50% {
            transform: translate(100px) rotateY(180deg);
        }
        100% {
            transform: translateY(100px) rotateZ(45deg);
        }
    }
    
    .pin li {
        width: 200px;
        height: 200px;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -100px;
        margin-top: -100px;
    }
    
    .pin li:nth-child(1) {
        transform: translateZ(100px);
    }
    
    .pin li:nth-child(2) {
        transform: translateZ(-100px) rotateY(180deg);
    }
    
    .pin li:nth-child(3) {
        transform: translate(-100px) rotateY(-90deg);
    }
    
    .pin li:nth-child(4) {
        transform: translate(100px) rotateY(90deg);
    }
    
    .pin li:nth-child(5) {
        transform: translateY(-100px) rotateX(90deg);
    }
    
    .pin li:nth-child(6) {
        transform: translateY(100px) rotateX(-90deg);
    }
    
    .pin li img {
        width: 100%;
        height: 100%;
    }
    
    .bgg {
        width: 320px;
        height: 560px;
        background: url("./img/zf_cubeBg.jpg") no-repeat 100% 100%;
        perspective: 3000px;
        position: absolute;
        top: 1750px;
        left: 800px;
    }
    
    .pinn {
        position: relative;
        transform-style: preserve-3d;
        width: 100%;
        height: 100%;
        list-style: none;
        animation: move 6s infinite;
    }
    
    @keyframes move {
        0% {
            transform: translate(200px) rotateX(90deg);
        }
        50% {
            transform: translate(100px) rotateY(180deg);
        }
        100% {
            transform: translateY(100px) rotateZ(45deg);
        }
    }
    
    .pinn li {
        width: 200px;
        height: 200px;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -100px;
        margin-top: -100px;
    }
    
    .pinn li:nth-child(1) {
        transform: translateZ(100px);
    }
    
    .pinn li:nth-child(2) {
        transform: translateZ(-100px) rotateY(180deg);
    }
    
    .pinn li:nth-child(3) {
        transform: translate(-100px) rotateY(-90deg);
    }
    
    .pinn li:nth-child(4) {
        transform: translate(100px) rotateY(90deg);
    }
    
    .pinn li:nth-child(5) {
        transform: translateY(-100px) rotateX(90deg);
    }
    
    .pinn li:nth-child(6) {
        transform: translateY(100px) rotateX(-90deg);
    }
    
    .pinn li img {
        width: 100%;
        height: 100%;
    }
</style>

<body>
    <div>
        <!-- <video autoplay muted loop class="shipin" src="17.mp4"></video> -->
        <iframe class="shipin" frameborder='no' allowfullscreen mozallowfullscreen webkitallowfullscreen src='http://go.plvideo.cn/front/video/preview?vid=947dc87e485a6bd7638b7df61eafb62f_9'></iframe>
    </div>

    <a href="#" class="box"></a>

    <div class="boxx">
        <div class="front">
            <img class="zzz" src="1.jpg" alt="" width="240px" height="240px">
        </div>
        <div class="back">
            <img class="fff" src="4.jpg" alt="" width="240px" height="240px">
        </div>

    </div>

    <div class="jieshao">
        <h2>This is my brief introduction</h2>
        <a class="mdw" href="#one">个人介绍</a>
        <a class="mdq" href="#two">生活碎片</a>
        <a class="mde" href="#three">联系方式</a>
        <h4 id="one">个人介绍</h4>
        <p>我的名字叫谢玟莉,请注意我的玟，遇到过很多人都会打错；
            <br>我也很喜欢豹纹，所以会有人叫我豹纹莉
            <br>这是一个简单的介绍
            <br>我是天秤座
            <br>喜欢旅游，去吃好吃的美食，买喜欢的东西，未来想尝试一些极限运动
            <br>如果你也喜欢就交个朋友冲冲冲
        </p>

        <img class="mee" src="9.jpg" width="160px" height="160px">

    </div>


    <div class="r">
        <img class="wu" src="5.jpg" width="200px" height="200px">
        <img class="san" src="3.jpg" width="200px" height="200px">
    </div>

    <div class="w">
        <img class="qi" src="12.jpg" width="200px" height="200px">
        <img class="liu" src="11.jpg" width="200px" height="200px">
    </div>

    <div>
        <img class="s" src="14.jpg" width="420px" height="420px">
    </div>

    <div class="zi">
        <h3 id="two">生活碎片</h3>

        <p>欢迎来到我可爱的网站
            <br>我很喜欢好看的东西，并且把它们记录下来，希望你看了也会喜欢; 这里一些我喜欢的东西，喜欢就往下看
            <br>这里有个小矩形，不要好奇，那里没什么
        </p>
        <div class="bbb">
            <a class="kkk">XieWenLi</a>
        </div>

    </div>

    <div class="m">
        <img class="errrrr" src="2.jpg" width="340px" height="150px">
        <img class="errrr" src="2.jpg" width="340px" height="150px">
        <img class="errr" src="2.jpg" width="340px" height="150px">
        <img class="err" src="2.jpg" width="340px" height="150px">
    </div>

    <div class="l">
        <img class="z" src="20.jpg" width="320px" height="320px">
        <img class="x" src="26.jpg" width="320px" height="320px">
        <img class="c" src="27.jpg" width="320px" height="320px">
        <div>
            <img class="v" src="31.jpg" width="320px" height="320px">
            <img class="b" src="18.jpg" width="320px" height="320px">
            <img class="n" src="8.jpg" width="300px" height="330px">
        </div>
        <div>
            <img class="zz" src="29.jpg" width="310px" height="320px">
            <img class="xx" src="7.jpg" width="310px" height="320px">
            <img class="cc" src="34.jpg" width="310px" height="320px">
        </div>
        <div>
            <img class="vv" src="32.jpg" width="310px" height="320px">
            <img class="bb" src="33.jpg" width="310px" height="320px">
            <img class="nn" src="38.jpg" width="310px" height="320px">
        </div>


    </div>

    <div class="ma">
        <h3 id="three">联系方式</h3>

        <img class="vx" src="15.jpg" width="60px" height="60px">
        <img class="qq" src="16.jpg" width="60px" height="60px">
    </div>

    <div class="bg">
        <ul class="pin">
            <li><img src="21.jpg" alt=""></li>
            <li><img src="22.jpg" alt=""></li>
            <li><img src="23.jpg" alt=""></li>
            <li><img src="24.jpg" alt=""></li>
            <li><img src="25.jpg" alt=""></li>
            <li><img src="28.jpg" alt=""></li>
        </ul>
    </div>
    <div class="bgg">
        <ul class="pinn">
            <li><img src="45.jpg" alt=""></li>
            <li><img src="39.jpg" alt=""></li>
            <li><img src="44.jpg" alt=""></li>
            <li><img src="42.jpg" alt=""></li>
            <li><img src="43.jpg" alt=""></li>
            <li><img src="41.jpg" alt=""></li>
        </ul>
    </div>


    </div>


</body>

</html>